import React, { useState } from 'react';
import avatar1 from '../assets/1.png';
import avatar2 from '../assets/2.png';
import avatar3 from '../assets/3.png';

function App() {
  const [nickname, setNickname] = useState('');
  const [gender, setGender] = useState('');
  const [age, setAge] = useState('');
  const [occupation, setOccupation] = useState('');
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [introduction, setIntroduction] = useState('');

  const tags = ['阳光开朗', '文艺清新', '运动达人'];

  const avatarStyles = [
    { id: 1, image: avatar1 },
    { id: 2, image: avatar2 },
    { id: 3, image: avatar3 },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
      <div className="w-full max-w-4xl flex gap-8">
        {/* Left Panel - Avatar */}
        <div className="bg-white rounded-3xl shadow-xl p-8 w-full max-w-sm">
          <h1 className="text-2xl font-bold mb-2">创建你的数字分身</h1>
          <p className="text-gray-500 mb-8">打造独特的个性化形象</p>
          
          <div className="flex justify-center mb-8">
            <div className="w-48 h-48 rounded-full overflow-hidden border-2 border-pink-200">
              <img 
                src={avatar1} 
                alt="Current avatar" 
                className="w-full h-full object-cover"
              />
            </div>
          </div>

          <button className="w-full py-3 bg-pink-400 text-white rounded-full hover:bg-pink-500 transition-colors">
            更换形象
          </button>

          <div className="mt-8">
            <h2 className="text-xl font-bold mb-4">形象风格</h2>
            <div className="grid grid-cols-3 gap-4">
              {avatarStyles.map((style) => (
                <div 
                  key={style.id} 
                  className="aspect-square rounded-2xl overflow-hidden hover:shadow-lg transition-all cursor-pointer"
                >
                  <img 
                    src={style.image} 
                    alt={`Avatar style ${style.id}`}
                    className="w-full h-full object-cover"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right Panel - Basic Info */}
        <div className="bg-white rounded-3xl shadow-xl p-8 w-full max-w-sm">
          <h2 className="text-xl font-bold mb-6">基本信息</h2>
          
          <div className="space-y-6">
            <div>
              <label className="block text-gray-600 mb-2">昵称</label>
              <input
                type="text"
                value={nickname}
                onChange={(e) => setNickname(e.target.value)}
                className="w-full px-4 py-2 rounded-xl border-2 border-gray-200 focus:border-pink-400 outline-none"
              />
            </div>

            <div>
              <label className="block text-gray-600 mb-2">性别</label>
              <div className="flex gap-4">
                {['男生', '女生'].map((option) => (
                  <button
                    key={option}
                    onClick={() => setGender(option)}
                    className={`flex-1 py-2 rounded-xl border-2 transition-colors ${
                      gender === option
                        ? 'border-pink-400 bg-pink-50 text-pink-600'
                        : 'border-gray-200 hover:border-pink-200'
                    }`}
                  >
                    {option}
                  </button>
                ))}
              </div>
            </div>

            <div>
              <label className="block text-gray-600 mb-2">年龄</label>
              <input
                type="number"
                value={age}
                onChange={(e) => setAge(e.target.value)}
                className="w-full px-4 py-2 rounded-xl border-2 border-gray-200 focus:border-pink-400 outline-none"
              />
            </div>

            <div>
              <label className="block text-gray-600 mb-2">职业</label>
              <input
                type="text"
                value={occupation}
                onChange={(e) => setOccupation(e.target.value)}
                className="w-full px-4 py-2 rounded-xl border-2 border-gray-200 focus:border-pink-400 outline-none"
              />
            </div>

            <div>
              <label className="block text-gray-600 mb-2">个性标签</label>
              <div className="flex flex-wrap gap-2">
                {tags.map((tag) => (
                  <button
                    key={tag}
                    onClick={() => setSelectedTags(prev => 
                      prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]
                    )}
                    className={`px-4 py-2 rounded-full border-2 transition-colors ${
                      selectedTags.includes(tag)
                        ? 'border-pink-400 bg-pink-50 text-pink-600'
                        : 'border-gray-200 hover:border-pink-200'
                    }`}
                  >
                    {tag}
                  </button>
                ))}
              </div>
            </div>

            <div>
              <label className="block text-gray-600 mb-2">个人简介</label>
              <textarea
                value={introduction}
                onChange={(e) => setIntroduction(e.target.value)}
                placeholder="介绍一下自己吧..."
                className="w-full px-4 py-2 rounded-xl border-2 border-gray-200 focus:border-pink-400 outline-none resize-none h-32"
              />
            </div>
          </div>

          <button className="w-full py-3 bg-pink-400 text-white rounded-full hover:bg-pink-500 transition-colors mt-8">
            保存资料
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;